<template>
  <div class="box-border w-100vw  h-100vh p-4 flex flex-col">
    <nav class="flex gap-4 mb-4">
      <!-- <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink> -->
      <div
        v-for="(item, index) in routes"
        :key="index"
        @click="link(item.path)"
        class="cursor-pointer"
      >
        {{ item.name }}
      </div>
    </nav>
    <main class="flex-1">
      <RouterView />
    </main>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { routes } from "../src/route/router.js";
const router = useRouter();
const link = (path) => {
  router.push(path);
};
</script>
<style scoped></style>
